
// import：导入 样式
@import "common.less";

@media screen and (max-width: 320px) {
    html {
      font-size: 320px / 15;
    }
}

* {
    padding: 0;
    margin: 0;
}

body {
    min-width: 320px;
    max-width: 750px;
    margin: 0 auto;
    height: 3000px;
}

div,
header,
a  {
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

li {
    list-style: none;
}

em,
i {
    font-style: normal;
}

.clearfix::after {
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}
.clearfix {
    *zoom: 1;
}



@number: 750 / 15;
@bg_color: #FFDB47;

// 头部
.top_header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: @bg_color;
    padding: 0 34rem / @number;
    width: 100%;
    height: 88rem / @number;

    .header_img {
        // 450 * 55
        width: 450rem / @number;
        height: 55rem / @number;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .login_img {
        width: 36rem / @number;
        height: 60rem / @number;
        img {
            width: 100%;
            height: 100%;
        }
    }
}

// 搜索
.search {
    position: relative;
    width: 100%;
    height: 92rem / @number;
    padding: 14rem/@number 24rem/@number;
    background-color: @bg_color;

    a {
        display: block;
        width: 702rem / @number;
        height: 64rem / @number;
        line-height: 64rem / @number;
        padding-left: 90rem / @number;
        // margin-top 会塌陷
        // margin-top: 2rem / @number;
        background-color: #FFF8DA;
        border-radius: (88rem / 2) / @number;

        font-size: 25rem / @number;
        color: #999;
    }

    i {
        position: absolute;
        top: 25rem / @number;
        left: 47rem / @number;

        width: 36rem / @number;
        height: 36rem / @number;
        background: url(../images/search.png) no-repeat center center;
        background-size: 36rem / @number;
    }
}

// banner
.slider {
    position: relative;
    width: 100%;
    height: 260rem / @number;

    .slider_bgimg {
        width: 100%;
        height: 100%;
    }

    .slider_content {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, 0);
        width: 702rem / @number;
        height: 260rem / @number;
        overflow: hidden;
        ul {
            width: 500%;

            transform: translateX(-702rem / @number);
            transition: all .3s;
            li {
                float: left;
            }
            img {
                width: 702rem / @number;
                height: 260rem / @number;
                border-radius: 20rem / @number;
            }
        }
        ol {
            position: absolute;
            left: 50%;
            bottom: 12rem / @number;
            transform: translateX(-50%);
            li {
                float: left;
                width: 8rem / @number;
                height: 8rem / @number;
                background-color: #ccc;
                border-radius: 4rem / @number;
                margin: 0 3rem / @number;

            }
            .current {
                width: 16rem / @number;
                background-color: #fff;
            }
        }
    }
    

}

// nav
.local_nav {
    li {
        float: left;

        a {
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: center;

            width: 150rem / @number;
            height: 142rem / @number;
            img {
                width: 84rem / @number;
                height: 84rem / @number;
            }

            p {
                margin-top: 5rem / @number;
                font-size: 22rem / @number;
                color: #666;
            }
        }
    }
}